<template>

  <div class="factors_wraps">
    <div class="textureTitleBar">

      <div style="font-size: 20px">
        <svg-icon name="close"/>
      </div>

      <div class="title">渲梦工厂</div>
      <div style="font-size: 20px">
        <svg-icon name="close"/>
      </div>
      <div style="font-size: 20px">
        <svg-icon name="close"/>
      </div>
      <div style="font-size: 20px">
        <svg-icon name="close"/>
      </div>

    </div>

    <el-radio-group v-model="renderTarget" size="large" text-color="white" fill="#fd7901" style="border-radius: 0px"
                    class="suBottonGroup">
      <el-radio-button class="suButton" label="通用" value="commonUse" style="width: 52px"/>
      <el-radio-button class="suButton" label="效果图" value=" effectSheet" style="width: 65px"/>
      <el-radio-button class="suButton" label="施工图" value="constructSheet" style="width: 65px"/>
      <el-radio-button class="suButton" label="机电图" value="electricMachineSheet" style="width: 65px"/>
      <el-radio-button class="suButton" label="协同" value="synergism" style="width: 52px"/>
    </el-radio-group>


  </div>


</template>
<script setup>
import {ref} from "vue";
import SvgIcon from "../Svglcon.vue";

const renderTarget = ref('commonUse')


</script>


<style scoped lang="scss">
.factors_wraps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px #797979 solid;
  width: 300px
}

.textureTitleBar {
  display: flex;
  height: 30px;
  justify-content: center;
  align-items: center;
  width: 300px;
  .title{
    width: 100%;
    font-size: 14px;
    text-align: left;

  }

}

.suBottonGroup {
  width: 300px;

}

.suButton {
  :deep( .el-radio-button__inner) {
    background-color: #E4E4E4;
    color: #242424;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    border: none;
    border-radius: 0;
  }
}


</style>